<template>
   <div>
        <template v-if="loading">
            <el-skeleton  :loading="loading" animated>
                <template #template>
                    <el-card shadow="hover" class="mt-5">
                        <template #header>
                            <div class="flex justify-between">
                                <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                                <el-skeleton-item variant="text" style="width: 10%;height: 25px;" />
                                <el-skeleton-item variant="text" style="width: 10%;height: 25px;" />
                                <el-skeleton-item variant="text" style="width: 10%;height: 25px;" />
                            </div>
                        </template>
                        <el-skeleton-item variant="text" style="width:100%;height: 225px;" />
                    </el-card>
                </template>
            </el-skeleton>
        </template>    

        <el-card v-show="!loading" shadow="hover" class="mt-5">
            <template #header>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500 font-bold">统计订单</span>
                    <div>
                        <el-check-tag @click="handleSelect(item)" :checked="item.value == current" v-for="(item,index) in optionItems" :key="index" class="ml-3 mr-3">
                            {{item.title}}
                        </el-check-tag>   
                    </div>
                </div>
            </template>
            <div id="charts" ref="chartsRef" style="width:100%;height:400px;"></div>   
        </el-card>
        
   </div>
</template>

<script setup>
    import {ref,reactive,onMounted,onBeforeUnmount} from 'vue';
    import * as echarts from 'echarts';
    import { useResizeObserver } from '@vueuse/core'

    var loading =ref(true);
    setTimeout(()=>{
        loading.value = false;
    },600)


    const current = ref("month");
    const optionItems = reactive([
        {title:"近一个月",value:"month"},
        {title:"近一周",value:"week"},
        {title:"近三天",value:"days"}
    ]);


    // 生命周期加载统计报表
    var myChart = null;

    // 在页面离开之前销毁统计报表组件
    onBeforeUnmount(() => {
        if(myChart){
            myChart.dispose(myChart);
        }
    })


    onMounted(()=>{
        var  option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [
                    120,
                    {
                    value: 200,
                    itemStyle: {
                        color: '#a90000'
                    }
                    },
                    350,
                    180,
                    70,
                    210,
                    430,
                    550,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar'
                }
            ]
        };

        initCharts(option);
    })


    const handleSelect = (item)=>{
        current.value = item.value;

        myChart.showLoading();
        initCharts( {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
                }
            ]
        });

        myChart.hideLoading();
    }


    function initCharts(option){
        var chartDom = document.getElementById('charts');
        if(!chartDom)return;
        if(myChart)myChart.dispose()
        myChart = echarts.init(chartDom);
        myChart.showLoading();
        option && myChart.setOption(option);
        myChart.hideLoading();
    }


    const chartsRef = ref(null);
    // 建通窗口改变
    useResizeObserver(chartsRef,(entires)=>{
        myChart.resize();
    });

</script>